 <!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <title>轮播图</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
      div,ul,li,img,button {
        margin: 0px;
        padding: 0px;
      }
 
      .container {
        width: 400px;
        margin: auto;
        overflow: hidden;
      }
 
      img {
        width: 400px;
      }
 
      .container ul:first-child {
        margin: 30px;
        list-style: none;
        white-space: nowrap;
        width: 1600px;
        clear: both;
        margin-left: -800px;
        transition: all .25s ease;
      }
 
      .container ul:first-child li {
        display: block;
        float: left;
        width: 400px;
      }
   
      .btnControl{
        width:164px;
        margin: 30px auto;
      }
 
      button{
        color: white;
        font-size: 16px;
        font-weight: bold;
        width: 80px;
        height: 30px;
        background: #ff313e;
        border: 0px;
        border-radius: 5px;
        box-shadow: #00000055 0 0 5px;
        outline: none;
        transition:all linear 0.30s;
      }
 
      button:hover{
        background: #ff2137;
      }
 
      button:active{
        box-shadow: #000000 3px 3px 5px;
        background: #c60a10;
      }
    </style>
    </head>
    <body>
 <div id="app">
   <div class="container">
     <ul v-bind:style="{marginLeft:mLeft+'px'}">
  <li v-for="img in imgs">
    < img v-bind:src="img.url" alt="">
  </li>
     </ul>
   </div>
   <div class="btnControl">
     <button @click=move(-1)>上一张</button>
     <button @click=move(1)>下一张</button>
   </div>
 </div>
 <script>
   var vm = new Vue({
     el: "#app",
     data: {
       imgs: [{
  id: 1,
  url: "../../assets/img/swiper/lbt1.png",
       },
       {
  id: 2,
  url: "../../assets/img/swiper/lbt2.png",
       },
       {
  id: 3,
  url:"../../assets/img/swiper/lbt3.png",
       },
       {
  id: 4,
  url: "../../assets/img/swiper/lbt4.png",
       }],
       i:0,  // 现在正在显示第0张(默认值)
       mLeft: 0,  // 图片ul的默认左边距为0 显示第0张
       timer: null  // timer设置为定时器
     },
     methods: {
       move: function(to) {
         if(to==undefined){  // 如果不传入参数, 默认为移动到下一张
    to=1;
         }
         this.i=this.i+to;  // 移动到下一张或者上一张
         if(this.i>3){  // 正着走到最后一张时跳到第一张
    this.i=0;
         }
         if(this.i<0){  // 倒着走到第一张时跳到最后一张
    this.i=3;
         }
         this.mLeft=-400*this.i;  // 设置data里表示图片ul的左边距为-400 / -800 / -1200, 分别显示第二张, 第三张, 第四章
         console.log(this.mLeft);  // 获取到每调用一次move函数, mLeft的最终值(控制图片显示)
       }
     },
     created:function(){  // 生命周期钩子函数, 实例被创建时设置一个定时器, 每隔3秒钟调用一次无参数的move()函数
       this.timer=setInterval(()=>{
         this.move()
       },3000)
            }
          })
 </script>
    </body>
</html>
<!--HbuildX粘过来缩进乱了-->